<template>
	<view class="index-page h-100 overflow-y">
		<view class="bgcolor1 flex align-center header-change-local">
			<text class="fs-24 ftcolor1 px-2">{{classes}}</text>
			<!-- <view class="">
				<uni-data-picker ref="picker" split="・" :clear-icon="false" :border="false" placeholder="请选择地区" popup-title="请选择所在地区"
					:localdata="getRegions" v-model="classes" @change="onchange" @nodeclick="onnodeclick" 
					@popupopened="onpopupopened" @popupclosed="onpopupclosed">
				</uni-data-picker>
			</view> -->
		</view>
		<view class="swiper-banner" v-if="bannerList.length">
			<swiper class="swiper h-100" indicator-color="rgba(247, 248, 252, 0.5)" indicator-active-color="#507EF7" circular
				:indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item class="h-100" v-for="(item,index) in bannerList" :key="index">
					<image class="w-100" :src="item.img" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="notice">
			<uni-notice-bar background-color="#fff" color="#444444" moreColor="#444444" show-get-more show-icon :speed="20"
				scrollable :text="notice.title" @getmore="navTo('/pages/noticeList/noticeList?title=公告列表')" />
		</view>
		<view class="bgcolor1 p-2">
			<view class="fs-32 font-weight-bolder ftcolor1 titleLine flex align-center mb-2">常用服务</view>
			<view class="flex align-center text-center">
				<view class="flex-1 flex flex-column border mr-2 py-1 rounded-circle bgcolor7"
					@click="navTo('/pages/cunqingjieshao/cunqingjieshao?title=村介绍')">
					<text class="fs-24 text-white">村介绍</text>
				</view>
				<view class="flex-1 flex flex-column border mr-2 py-1 rounded-circle bgcolor7"
					@click="navTo('/pages/takephoto/takephoto?title=随手拍')">
					<text class="fs-24 text-white">随手拍</text>
				</view>
				<view class="flex-1 flex flex-column border mr-2 py-1 rounded-circle bgcolor7">
					<text class="fs-24 text-white">志愿活动</text>
				</view>
				<view class="flex-1 flex flex-column border py-1 rounded-circle bgcolor7">
					<text class="fs-24 text-white">积分商城</text>
				</view>
			</view>
		</view>
		<view class="guide">
			<text
				class="fs-32 text-white font-weight-bolder w-100 h-100 flex align-center justify-center bgcolor8">乡村导览</text>
		</view>

		<view class="bgcolor1 pb-4 mt-2">
			<view class="fs-32 font-weight-bolder ftcolor1 titleLine flex align-center p-2">乡村乡情</view>
			<view class="flex flex-wrap px-1">
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=村务公开&type=gz_cwgk')">
						<image class="w-100 h-100" src="/static/images/img1.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">村务</text>
							<text class="text-white fs-40 text-center font-weight-bolder">公开</text>
						</view>
					</view>
				</view>
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=村规民约&type=gz_cgmy')">
						<image class="w-100 h-100" src="/static/images/img3.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">村规</text>
							<text class="text-white fs-40 text-center font-weight-bolder">民约</text>
						</view>
					</view>
				</view>
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=公正服务&type=gz_gzfw')">
						<image class="w-100 h-100" src="/static/images/img4.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">公正</text>
							<text class="text-white fs-40 text-center font-weight-bolder">服务</text>
						</view>
					</view>
				</view>
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=普法宣传&type=gz_pfxc')">
						<image class="w-100 h-100" src="/static/images/img5.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">普法</text>
							<text class="text-white fs-40 text-center font-weight-bolder">宣传</text>
						</view>
					</view>
				</view>
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=家风家训&type=gz_jfjx')">
						<image class="w-100 h-100" src="/static/images/img6.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">家风</text>
							<text class="text-white fs-40 text-center font-weight-bolder">家训</text>
						</view>
					</view>
				</view>
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=移风易俗&type=gz_yfms')">
						<image class="w-100 h-100" src="/static/images/img7.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">移风</text>
							<text class="text-white fs-40 text-center font-weight-bolder">易俗</text>
						</view>
					</view>
				</view>
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=乡贤乡史&type=gz_xxxs')">
						<image class="w-100 h-100" src="/static/images/img8.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">乡贤</text>
							<text class="text-white fs-40 text-center font-weight-bolder">乡史</text>
						</view>
					</view>
				</view>
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=文明评议&type=gz_wmpy')">
						<image class="w-100 h-100" src="/static/images/img9.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">文明</text>
							<text class="text-white fs-40 text-center font-weight-bolder">评议</text>
						</view>
					</view>
				</view>
				<view class="zlitem">
					<view class="position-relative rounded overflow-hidden h-100 w-100"
						@click="navTo('/pages/cunwugongkai/cunwugongkai?title=乡村文化&type=gz_xcwh')">
						<image class="w-100 h-100" src="/static/images/img10.jpg" mode="aspectFill"></image>
						<view
							class="position-absolute  top-0 bottom-0 left-0 right-0 rounded rough-texture flex flex-column justify-center">
							<text class="text-white fs-40 text-center font-weight-bolder">乡村</text>
							<text class="text-white fs-40 text-center font-weight-bolder">文化</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import baseApi from '@/api/baseApi.js'
	import serviceApi from '@/api/serviceApi.js'
	export default {
		data() {
			return {
				classes: '',
				basedata: {},
				notice: null,
				bannerList: []
			}
		},
		watch: {
			getUser: {
				handler() {
					const curRegion = uni.getStorageSync('curMinRegion')
					console.log('curRegion', curRegion)
					if (curRegion) {
						let classes = []
						Object.keys(curRegion).forEach(i => {
							classes.push(curRegion[i].name)
						})
						this.classes = classes.join('·')
					} else {
						let classes = []
						if(this.getUser){
							Object.keys(this.getUser).forEach(i => {
								classes.push(this.getUser.regions[i].name)
							})
						}
						this.classes = classes.join('·')
					}
				},
				immediate: true
			},
			getCurRegion: {
				handler() {
					if (this.getCurRegion.id) {
						// this.gz_banner()
					}
				},
				immediate: true
			}
		},
		computed: {
			...mapGetters(['getRegions', 'getUser', 'getCurRegion']),
		},
		created() {
			// this.base_data()
			setTimeout(() => {
				this.gz_pub_notice()
			}, 500)
		},
		methods: {
			gz_banner() {
				serviceApi.gz_banner({
					region_id: this.getCurRegion.id
				}).then(res => {
					this.bannerList = res.data
				})
			},
			base_data() {
				baseApi.base_data().then(res => {
					this.basedata = res.data
				})
			},
			gz_pub_notice() {
				baseApi.gz_pub_notice().then(res => {
					this.notice = res.data[0] || null
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			onnodeclick(e) {
				const key = e.value.split('-')
				console.log('key----', e);
				this.$store.commit("setCurRegion", e)
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			}
		}
	}
</script>


<style lang="scss">
	.index-page {
		.header-change-local {
			height: 44px;
		}

		.swiper-banner {
			height: 400rpx;
		}

		.zlitem {
			width: 33.33%;
			height: 180rpx;
			padding: 5px;
		}

		.guide {
			height: 100px;
			background-image: url('@/static/images/img1.jpg');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center bottom;
		}
	}
</style>